<script setup lang="ts">
import { Handle, Position } from "@vue-flow/core";
import { ElButton } from "element-plus";
import type { Node } from "@vue-flow/core";

const props = defineProps<{
  data: any;
  id: string;
}>();

const emit = defineEmits<{
  returnToToolbar: [node: Node];
  showDetails: [data: any];
  bindEquipment: [nodeId: string, processId: string];
}>();

// 控制详情对话框的显示

// 处理返回工具栏
const handleReturn = () => {
  emit("returnToToolbar", {
    id: props.id,
    data: props.data,
    position: { x: 0, y: 0 }, // 这些是必需的Node类型属性
    type: "custom"
  });
};

// 显示详情对话框
const showDetails = () => {
  emit("showDetails", props.data);
};

// 绑定设备
const handleBindEquipment = () => {
  emit("bindEquipment", props.id, props.data.process.id);
};
</script>

<template>
  <div class="process-node">
    <Handle type="target" :position="Position.Top" />

    <div class="node-content">
      <span class="node-label">{{ data.label }}</span>
      <div class="node-actions">
        <el-button type="primary" link size="small" @click.stop="showDetails"> 查看详情 </el-button>
        <el-button type="success" link size="small" @click.stop="handleBindEquipment">绑定设备</el-button>
        <el-button type="warning" link size="small" @click.stop="handleReturn"> 返回工具栏 </el-button>
      </div>
    </div>

    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>

<style scoped>
.process-node {
  position: relative;
  min-width: 200px;
  background: #e6f5f3;
  border: 2px solid var(--el-color-primary);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}
.process-node:hover {
  box-shadow: 0 4px 16px 0 rgb(0 0 0 / 20%);
  transform: translateY(-2px);
}
.node-content {
  padding: 12px;
}
.node-label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-color-primary);
}
.node-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #009688;
}
:deep(.el-button) {
  padding: 4px 8px;
}

/* Handle 样式 */
:deep(.vue-flow__handle) {
  width: 8px;
  height: 8px;
  background-color: var(--el-color-primary);
  border: 2px solid #ffffff;
}
:deep(.vue-flow__handle:hover) {
  background-color: var(--el-color-primary-light-3);
}
</style>
